<template>
	<page-meta :page-style="'overflow:' + (show ? 'hidden' : 'visible')"></page-meta>
	<view>
		<view class="top" :style="`padding-top: ${$Height() - 30}px;`">
			<view class="top_box">
				<view class="top_box_left">
					<image class="top_box_left_img" src="/static/30.png" mode="" @click="$fh"></image>
					<view class="top_box_left_box" @click="to_index">
						<image class="top_box_leftt_box_img" src="/static/83.png" mode=""></image>
						返回用户端
					</view>
				</view>
				<view class="top_box_title">发布房源</view>
				<view class="top_box_right" :style="`width: ${$Width() + 15}px;`"></view>
			</view>
		</view>
		<view class="top_img"></view>

		<view class="con">
			<view class="list">
				<view class="list_box">
					<view class="list_box_left">房源名称</view>
					<input class="list_box_right" type="text" placeholder="输入房源名称..." v-model="title" />
				</view>
			</view>

			<view class="list">
				<view class="list_box">
					<view class="list_box_left" style="width: 100%">封面图片（单图上传）</view>
				</view>
				<view class="list_img">
					<view class="list_img_nr" @click="add_img(1)">
						<image class="list_img_nr_img" :src="img_url" mode="" v-if="img_url"></image>
						<image class="list_img_nr_img" src="/static/68.png" mode="" v-else></image>
						<image class="list_img_nr_img_zw" src="/static/69.png" mode="" v-if="img_url"></image>
					</view>
				</view>
			</view>

			<view class="list">
				<view class="list_box">
					<view class="list_box_left" style="width: 100%">轮播图（多图上传）</view>
				</view>
				<view class="list_img">
					<view class="list_img_nr" @click="add_img(2)" v-if="img_list.length < 6">
						<image class="list_img_nr_img" src="/static/68.png" mode=""></image>
					</view>
					<view class="list_img_nr" v-for="(item, index) in img_list" :key="index">
						<image class="list_img_nr_img" :src="item" mode=""></image>
						<image class="list_img_nr_img_zw" src="/static/69.png" mode="" @click="dal_img(index)"></image>
					</view>
				</view>
			</view>

			<view class="list">
				<view class="list_box">
					<view class="list_box_left">所在区域</view>
					<picker mode="selector" :value="area" :range="area_list" @change="areaChange" range-key="name">
						<input class="list_box_right" type="text" placeholder="未选择" v-model="area" disabled />
					</picker>
				</view>
				<view class="list_box">
					<view class="list_box_left">地图选点</view>
					<view class="list_box_right" @click="Location">
						<input class="list_box_right_inp" type="text" placeholder="未选择" v-model="didian" disabled />
						<image class="list_box_img" src="/static/28.png" mode=""></image>
					</view>
				</view>
				<view class="list_box">
					<view class="list_box_left">详细地址</view>
					<input class="list_box_right" type="text" placeholder="输入详细地址..." v-model="address" />
				</view>
			</view>

			<view class="list">
				<view class="list_box">
					<view class="list_box_left">连住特惠</view>
					<view class="list_box_right">
						<input class="list_box_right_inp" type="text" placeholder="输入天数" v-model="zjitian" />
						<text class="text">天</text>
					</view>
				</view>
				<view class="list_box">
					<view class="list_box_left"></view>
					<view class="list_box_right">
						<input class="list_box_right_inp" type="text" placeholder="输入折扣" v-model="youhui" />
						<text class="text">折</text>
					</view>
				</view>
			</view>

			<view class="list">
				<view class="list_box">
					<view class="list_box_left">房屋类型</view>
					<view class="list_box_right">
						<picker mode="selector" :value="leixing" :range="leixing_list" @change="leixingChange" style="flex: 1">
							<input class="list_box_right_inp" type="text" placeholder="未选择" v-model="leixing" disabled />
						</picker>
						<image class="list_box_img" src="/static/28.png" mode=""></image>
					</view>
				</view>
			</view>

			<view class="list">
				<view class="list_box">
					<view class="list_box_left">出租类型</view>
					<view class="list_box_right">
						<picker
							mode="selector"
							:value="czleixing"
							:range="czleixing_list"
							@change="czleixingChange"
							style="flex: 1">
							<input class="list_box_right_inp" type="text" placeholder="未选择" v-model="czleixing" disabled />
						</picker>
						<image class="list_box_img" src="/static/28.png" mode=""></image>
					</view>
				</view>
			</view>

			<view class="list">
				<view class="list_box">
					<view class="list_box_left">户型信息</view>
					<view class="list_box_right">
						<input class="list_box_right_inp" type="text" placeholder="输入几室" v-model="shi" />
						<text class="text">室</text>
					</view>
				</view>
				<view class="list_box">
					<view class="list_box_left"></view>
					<view class="list_box_right">
						<input class="list_box_right_inp" type="text" placeholder="输入几厅" v-model="ting" />
						<text class="text">厅</text>
					</view>
				</view>
				<view class="list_box">
					<view class="list_box_left"></view>
					<view class="list_box_right">
						<input class="list_box_right_inp" type="text" placeholder="输入几厨" v-model="chu" />
						<text class="text">厨</text>
					</view>
				</view>
				<view class="list_box">
					<view class="list_box_left"></view>
					<view class="list_box_right">
						<input class="list_box_right_inp" type="text" placeholder="输入几卫" v-model="wei" />
						<text class="text">卫</text>
					</view>
				</view>
			</view>

			<view class="list">
				<view class="list_box">
					<view class="list_box_left">面积信息</view>
					<view class="list_box_right">
						<input class="list_box_right_inp" type="text" placeholder="输入面积..." v-model="mianji" />
						<text class="text">m²</text>
					</view>
				</view>
			</view>

			<view class="list">
				<view class="list_box">
					<view class="list_box_left">宜居人数</view>
					<input class="list_box_right" type="text" placeholder="输入可住人数..." v-model="renshu" />
				</view>
			</view>

			<view class="list">
				<view class="list_box">
					<view class="list_box_left">床铺数量</view>
					<input class="list_box_right" type="text" placeholder="输入床铺数量..." v-model="shuliang" />
				</view>
			</view>

			<view class="list">
				<view class="list_box">
					<view class="list_box_left">常规价格</view>
					<input class="list_box_right" type="text" placeholder="输入常规价格 ..." v-model="price" />
				</view>
			</view>
		</view>

		<view class="con_title">
			<view class="con_title_zw"></view>
			服务设施
		</view>

		<view class="con">
			<view class="box">
				<view class="box_nr" v-for="(item, index) in picker_list" :key="index">
					<view class="title">{{ item.title }}</view>
					<view class="box_list">
						<view
							class="box_list_nr"
							:class="isshow(ttem.id, ttem.title, item.id) ? 'box_list_nr_xz' : ''"
							v-for="(ttem, idx) in item.shebeis"
							:key="idx"
							@click="box_listclick(ttem.id, ttem.title, item.id)">
							{{ ttem.title }}
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="btn">
			<view class="btn_box">
				<view class="btn_box_right" @click="submit">发布房源</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { reactive } from 'vue'
	import { useCityStore } from '@/utils/cityStore.js'
	const cityStore = useCityStore()
	const http = inject('$http')
	let img_list = ref([])
	let img_url = ref('')
	let area_list = ref([])
	let leixing_list = ref(['民宿', '公寓'])
	let czleixing_list = ref(['整套出租', '单间出租', '合住房间'])
	let picker_list = ref([])
	let picker_id_list = reactive({})

	let id = ref(0)
	let title = ref('')
	let area = ref('')
	let didian = ref('')
	let jingdu = ref('')
	let weidu = ref('')
	let address = ref('')
	let zjitian = ref('')
	let youhui = ref('')
	let leixing = ref('')
	let czleixing = ref('')
	let shi = ref('')
	let ting = ref('')
	let chu = ref('')
	let wei = ref('')
	let mianji = ref('')
	let renshu = ref('')
	let shuliang = ref('')
	let content = ref('')
	let price = ref('')
	let sheshi = ref([])

	const submit = () => {
		let data = {
			photo: img_url.value,
			photos: img_list.value.join('|'),
			title: title.value,
			area: area.value,
			didian: didian.value,
			jingdu: jingdu.value,
			weidu: weidu.value,
			address: address.value,
			zjitian: zjitian.value,
			youhui: youhui.value,
			leixing: leixing.value,
			czleixing: czleixing.value,
			shi: shi.value,
			ting: ting.value,
			chu: chu.value,
			wei: wei.value,
			mianji: mianji.value,
			renshu: renshu.value,
			shuliang: shuliang.value,
			content: content.value,
			price: price.value,
			sheshi: sheshi.value.join(',')
		}

		let index = 0
		let xinxi = []
		// let sheshi = []

		for (const key in picker_id_list) {
			console.log(111, picker_id_list)

			if (picker_id_list[key].length > 0) {
				console.log('index', index)
				xinxi.push({
					ssid: picker_list.value[index].id,
					ssids: picker_id_list[key].join(',')
				})
				// sheshi.push([...picker_id_list[key]])
			}
			index += 1
		}
		data.xinxi = xinxi
		// data.sheshi = sheshi.join(',')

		console.log('data', data)

		if (id.value == 0) {
			http.post('/srapi/keyuan/tjfangyuan', data).then((res) => {
				console.log('地区', res)

				uni.showToast({
					mask: true,
					title: res.msg,
					icon: 'none',
					duration: 500
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 500) // 1秒后执行打印功能
			})
		} else {
			http.post('/srapi/keyuan/bjfangyuan', { id: id.value, ...data }).then((res) => {
				console.log('地区', res)

				uni.showToast({
					mask: true,
					title: res.msg,
					icon: 'none',
					duration: 500
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 500) // 1秒后执行打印功能
			})
		}
	}

	const areaChange = (e) => {
		console.log('房源状态')
		area.value = area_list.value[e.detail.value].name
	}
	const leixingChange = (e) => {
		console.log('房源状态')
		leixing.value = leixing_list.value[e.detail.value]
	}
	const czleixingChange = (e) => {
		console.log('房源状态')
		czleixing.value = czleixing_list.value[e.detail.value]
	}
	const Location = () => {
		uni.chooseLocation({
			success: function (res) {
				console.log('位置名称：' + res.name)
				console.log('详细地址：' + res.address)
				console.log('纬度：' + res.latitude)
				console.log('经度：' + res.longitude)
				didian.value = res.name
				address.value = res.address
				weidu.value = res.latitude
				jingdu.value = res.longitude
			}
		})
	}

	const isshow = (id, title, type) => {
		const refArray = picker_id_list['picker_id' + type]
		return refArray.includes(id.toString())
	}
	const box_listclick = (is_id, title, type) => {
		let id = is_id.toString()
		// 根据type获取对应的ref
		const targetRef = picker_id_list['picker_id' + type]
		// 检查id是否存在于数组中
		const index = targetRef.indexOf(id)
		const index2 = sheshi.value.indexOf(title)
		if (index !== -1) {
			targetRef.splice(index, 1)
		} else {
			targetRef.push(id)
		}
		if (index2 !== -1) {
			sheshi.value.splice(index2, 1)
		} else {
			sheshi.value.push(title)
		}
	}

	const add_img = (type) => {
		if (type == 1) {
			uni.chooseMedia({
				count: 1,
				mediaType: ['image'],
				sourceType: ['album', 'camera'],
				success(res) {
					console.log(res.tempFiles)
					res.tempFiles.map((item) => {
						http.upload(item.tempFilePath).then((res) => {
							img_url.value = res.file_path
						})
					})
				}
			})
		} else {
			uni.chooseMedia({
				count: 6 - img_list.value.length,
				mediaType: ['image'],
				sourceType: ['album', 'camera'],
				success(res) {
					console.log(res.tempFiles)
					res.tempFiles.map((item) => {
						if (img_list.value.length < 6) {
							http.upload(item.tempFilePath).then((res) => {
								console.log(res)
								if (img_list.value.length < 6) {
									img_list.value.push(res.file_path)
								}
							})
						}
					})
				}
			})
		}
	}

	const dal_img = (index) => {
		console.log('删除1')
		img_list.value.splice(index, 1)
	}

	const indexlist = async () => {
		await http.post('/srapi/home/ms').then((res) => {
			console.log('地区', res)
			area_list.value = res.area
		})
		await http.post('/srapi/keyuan/shebei').then((res) => {
			console.log('服务设施', res.data)
			picker_list.value = res.data

			for (var i = 0; i < res.data.length; i++) {
				picker_id_list['picker_id' + res.data[i].id] = []
			}
			console.log('picker_id_list', picker_id_list)
		})

		if (id.value != 0) {
			await http.post('/srapi/keyuan/detail', { id: id.value }).then((res) => {
				console.log('详情', res)
				img_url.value = res.data.photo
				img_list.value = res.data.photos.split('|')
				title.value = res.data.title
				area.value = res.data.area
				didian.value = res.data.didian
				jingdu.value = res.data.jingdu
				weidu.value = res.data.weidu
				address.value = res.data.address
				zjitian.value = res.data.zjitian
				youhui.value = res.data.youhui
				leixing.value = res.data.leixing
				czleixing.value = res.data.czleixing
				shi.value = res.data.shi
				ting.value = res.data.ting
				chu.value = res.data.chu
				wei.value = res.data.wei
				mianji.value = res.data.mianji
				renshu.value = res.data.renshu
				shuliang.value = res.data.shuliang
				content.value = res.data.content
				price.value = res.data.price
				sheshi.value = res.data.sheshi.split(',')

				for (var i = 0; i < res.fangyuans.length; i++) {
					let ssid = res.fangyuans[i].ssids.replaceAll(' ', '')
					picker_id_list['picker_id' + res.fangyuans[i].ssid] = ssid.split(',')
				}
			})
		}
	}

	onLoad((option) => {
		console.log('接收传参:', option)
		id.value = option.id
		indexlist()
	})
</script>

<style lang="less" scoped>
	.top {
		position: sticky;
		left: 0;
		top: 0;
		z-index: 9;
		width: 750rpx;
		box-sizing: border-box;
		padding: 30rpx 30rpx 10rpx;
		background: linear-gradient(0deg, #e3f0fa 0%, #c0e6fc 100%);
		.top_box {
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 10rpx;
			.top_box_left {
				display: flex;
				align-items: center;
				position: relative;
				z-index: 2;
				.top_box_left_img {
					width: 17rpx;
					height: 30rpx;
					margin-right: 30rpx;
				}
				.top_box_left_box {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 190rpx;
					height: 60rpx;
					background: rgba(255, 255, 255, 0.8);
					border: 1rpx solid #d4d4d4;
					border-radius: 31rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #000000;
					letter-spacing: -0.43rpx;
					.top_box_leftt_box_img {
						width: 26rpx;
						height: 26rpx;
						margin-right: 5rpx;
					}
				}
			}
			.top_box_title {
				position: absolute;
				z-index: 1;
				width: 750rpx;
				left: -30rpx;
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 32rpx;
				font-weight: 500;
				color: #000000;
			}
		}
	}

	.top_img {
		width: 750rpx;
		height: 320rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
		background: linear-gradient(0deg, #f4f5f9 0%, #c0e6fc 100%);
	}

	.con {
		padding: 30rpx 30rpx;
	}
	.con_title {
		font-size: 28rpx;
		font-weight: 500;
		color: #000000;
		display: flex;
		align-items: center;
		padding-left: 30rpx;
		.con_title_zw {
			width: 6rpx;
			height: 30rpx;
			background: #3475f3;
			border-radius: 3rpx;
			margin-right: 15rpx;
		}
	}

	.list {
		padding: 0 30rpx;
		background: #ffffff;
		border-radius: 12rpx;
		margin-bottom: 18rpx;
		flex: 1;
		.list_box {
			display: flex;
			align-items: center;
			.list_box_left {
				width: 120rpx;
				padding: 30rpx 0;
				font-size: 28rpx;
				font-weight: 500;
				color: #000000;
				margin-right: 40rpx;
			}
			.list_box_right {
				font-size: 28rpx;
				font-weight: 500;
				padding: 30rpx 0;
				border-bottom: 1px solid #ebedf2;
				flex: 1;
				display: flex;
				align-items: center;
				.list_box_right_inp {
					flex: 1;
					font-size: 28rpx;
					font-weight: 500;
				}
				.text {
					font-size: 28rpx;
					font-weight: 500;
					color: #000000;
				}
			}

			.list_box_img {
				width: 11rpx;
				height: 20rpx;
			}
		}
		.list_box:last-child {
			.list_box_right {
				border-bottom: none;
			}
		}

		.list_img {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			gap: 25rpx; /* 间距相等 */
			padding-bottom: 30rpx;
			.list_img_nr {
				width: 162rpx;
				height: 162rpx;
				border-radius: 20rpx;
				position: relative;
			}
			.list_img_nr_img {
				width: 162rpx;
				height: 162rpx;
				border-radius: 20rpx;
			}
			.list_img_nr_img_zw {
				position: absolute;
				right: 0;
				bottom: 0;
				width: 66rpx;
				height: 46rpx;
			}
		}
	}

	.box {
		padding: 30rpx;
		background: #ffffff;
		border-radius: 12rpx;
		.title {
			font-size: 24rpx;
			font-weight: 500;
			color: #000000;
			margin: 30rpx 0 20rpx;
		}
		.box_list {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-gap: 10rpx;
			.box_list_nr {
				padding: 15rpx 0;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #ffffff;
				border: 1rpx solid #acacac;
				border-radius: 10rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #000000;
			}
			.box_list_nr_xz {
				background: #3475f3;
				color: #ffffff;
				border: 1rpx solid #3475f3;
			}
		}
	}

	.btn {
		margin-top: 60rpx;
		height: 115rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom));
		padding-bottom: calc(env(safe-area-inset-bottom));
		.btn_box {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 750rpx;
			box-sizing: border-box;
			background: #fff;
			padding: 15rpx 30rpx;
			padding-bottom: calc(15rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(15rpx + env(safe-area-inset-bottom));
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.05);
			z-index: 20;
			.btn_box_left {
				width: 223rpx;
				height: 78rpx;
				background: #ffffff;
				border: 2rpx solid #2468fb;
				border-radius: 41rpx;
				font-size: 28rpx;
				font-weight: 700;
				color: #2468fb;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 21rpx;
				.btn_box_left_img {
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}
			.btn_box_right {
				display: flex;
				justify-content: center;
				align-items: center;
				background: #2468fb;
				border: 2rpx solid #2468fb;
				height: 78rpx;
				border-radius: 39rpx;
				flex: 1;
				font-size: 28rpx;
				font-weight: 700;
				color: #ffffff;
			}
		}
	}

	//
</style>
